<template>
  <div v-if="shopinfo">
    
      <!-- <span @click="$router.go(-1)">&lt;</span>
      <span>...</span> -->
  <van-nav-bar
  title="详情页"
  left-text="返回"
  right-text="..."
  left-arrow
  @click-left="$router.go(-1)"/>
    
    <div class="detail" v-if="shopinfo.info">
      <div class="pic">
        <img :src="shopinfo.info.head_pic_url" alt="">
      </div>
      <div v-if="shoplist.find((item)=>{ return item.mtWmPoiId == shopinfo.mtWmPoiId }) " style="color:red" class="shoucang" @click="cancel_sc()">❤</div>
      <!-- 收藏按钮 -->
      <div v-else class="shoucang" @click="sc()">❤</div>
      <div class="name">
        <div>{{shopinfo.info.name}}</div>
      </div>
    </div>
    <div class="block" v-if="shopinfo.taglist && shopinfo.taglist.length > 0">
      <div class="left">
        <div @click="currentIndex = index" v-for="(item,index) in shopinfo.taglist" :key="index">{{item.name}}</div>
      </div>
      <div class="right">
        <div class="good" v-for="(item,index) in shopinfo.taglist[currentIndex].goodlist" :key="index">
          <div class="img-box">
            <img :src="item.picture" alt="">
          </div>
          <div class="text">
            <div>{{item.name}}</div>
            <div>¥{{item.min_price}}</div>
            <div>{{item.month_saled_content}}</div>
          </div>
          <div class="opes">
            <span v-if="isIn(item)" @click="handleSub(item)">-</span>
            <span v-if="isIn(item)"> {{ isInCount(item) }} </span>  
            <span @click="handleAdd(item)">+</span>
          </div>
        </div>
      </div>
    </div>
    <div class="bar">
      <span @click="$refs.shopcart.visible = !$refs.shopcart.visible">购物车</span>
      <span>{{totalPrice}}</span>
    </div>
    <Shopcart ref="shopcart"></Shopcart>
  </div>
  <div v-else>
    该商家已倒闭!
  </div>
</template>

<script>
import {shop_info, shop_shou,shop_quxia} from '../utils/api'
import Shopcart from '../components/Shopcart.vue'
import mixin from '../mixins/index'
import {mapState,mapGetters} from 'vuex'
//mapstate 将vuex中的数据 映射到当前组件的computed中 
//mapgetters 将vuex中的计算方法 映射到当前组件的computed中 
export default {
  data(){
    return {
      currentIndex:0,
      shopinfo:{},
      count:0,
      dianle:false,
    }
  },
  computed:{
    ...mapState('scl',['shopcartlist']),
    ...mapState('sl',['shoplist']),
    ...mapGetters('scl',["totalPrice"])
  },
  components:{ //局部注册 组件
    Shopcart
  },
  mounted(){
    //获取动态路由参数 this.$route.params.id
    console.log( this.$route );
    
    //document.title = this.$route.meta.title;

    //发请求, 通过店铺id 获取店铺详情
    shop_info( { id: this.$route.query.id } ).then((res)=>{
      console.log(res.data);
      this.shopinfo = res.data.shopinfo;//保存店铺详情
    });
   
  },
  mixins:[mixin], //局部注册 混入对象
  methods:{
    isIn(item){ //判断 传入的商品(参数)是否在购物车中.
      // return this.list.find((good)=>{ return good.id == item.id })
      return this.shopcartlist.find((good)=>{ return good.id == item.id })
    },
    isInCount(item){ //返回 传入的商品(参数) 在购物车中的数量
      return this.isIn(item) && this.isIn(item).count
    },
    cancel_sc(){
      this.$store.dispatch('sl/request_unfav',this.shopinfo)
      //this.$toast('已取消收藏')
    },
    sc(){
      this.$store.dispatch('sl/request_fav',this.shopinfo)
      //this.$toast('已收藏')
    }
  }
}
</script>

<style lang="scss">
.red{
  background-color: red;
}
.white{
  background-color: white;
}
.nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background-color: #eee;
}
.detail{
  position: relative;
  .shoucang{
    width: 30px;
    height: 30px;
    position: absolute;
    right: 30px;
    top:30px;
  }
  img{
    width: 100%;
  }
}
.block{
  display: flex;
  font-size: 12px;
  .left{
    width: 100px;
    margin-right: 10px;
    line-height: 36px;
    div{
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .right{
    .good{
      position: relative;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .img-box{
        width: 70px;
        margin-right: 10px;
        img{
          width: 100%;
        }
      }
      .text{
        flex:1;
      }
      .opes{
        /* position: absolute;
        right: 0;
        bottom: 0; */
        span{
          display: inline-block;
          width: 16px;
          height: 16px;
          border-radius: 50%;
          background-color: dodgerblue;
          color: white;
          text-align: center;
          line-height: 16px;
          margin-left: 10px;
        }
        span:nth-child(2){
          color: black;
          background-color: white;
        }
      }
    }
  }
}

.bar{
  position: fixed;
  z-index: 999;
  bottom: 0;
  width: 100%;
  background-color: darkslategray;
  color: white;
  display: flex;
  padding: 10px;
}
</style>